<template>
    <full-screen-view v-progress-loading="loading" :loading-tip="tip" :loading-percent="percent" :body-style="{ height: '100%' }" @afterEnter="afterEnter">
        <flexbox direction="column" align="stretch" class="xr-create">
            <flexbox class="xr-create__header">
                <div v-if="!$slots.title" class="title">{{ title }}</div>
                <slot name="title" />
                <CloseOutlined class="close" @click="close" />
            </flexbox>
            <div class="xr-create__body">
                <slot />
            </div>
            <div class="xr-create__footer">
                <slot name="footer" />
                <a-button @click="handleDebouncedSave(5)">保存</a-button>
                <a-button @click="handleDebouncedSave(3, '否')">驳回</a-button>
                <a-button type="primary" @click="handleDebouncedSave(3, '是')">通过</a-button>
            </div>
        </flexbox>
    </full-screen-view>
</template>

<script lang="ts">
import FullScreenView from './FullScreenView.vue';
import { CloseOutlined } from '@ant-design/icons-vue';
import { debounce } from '@/utils/util';

import { defineComponent, onMounted, onUnmounted, getCurrentInstance } from 'vue';
export default defineComponent({
    components: {
        FullScreenView,
        CloseOutlined
    },
    props: {
        title: String,
        appendToBody: {
            type: Boolean,
            default: true
        },
        showCancel: {
            type: Boolean,
            default: true
        },
        confirmButtonText: {
            type: String,
            default: '保存'
        },
        loading: {
            type: Boolean,
            default: false
        },
        percent: {
            type: Number,
            default: 0
        },
        tip: {
            type: String,
            default: ''
        }
    },
    setup(props, { emit }) {
        const instance: any = getCurrentInstance();
        const afterEnter = () => {
            emit('afterEnter');
        };
        const save = (type: number, pass = '') => {
            emit('save', {
                query: { pass },
                type
            });
        };
        const close = () => {
            emit('close');
        };
        const handleDebouncedSave = debounce(save, 300);
        onMounted(() => {
            if (props.appendToBody) {
                document.body.appendChild(instance.proxy.$el);
            }
        });
        onUnmounted(() => {
            if (props.appendToBody) {
                if (instance.proxy.$el && instance.proxy.$el.parentNode) {
                    instance.proxy.$el.parentNode.removeChild(instance.proxy.$el);
                }
            }
        });
        return {
            afterEnter,
            save,
            close,
            handleDebouncedSave
        };
    }
});
</script>

<style lang="less" scoped>
.xr-create {
    position: relative;
    height: 100%;
    &__header {
        height: 40px;
        margin-bottom: 20px;
        padding: 0 10px;
        flex-shrink: 0;
        .title {
            flex: 1;
            font-size: 17px;
            color: #333;
            font-weight: bold;
            text-align: center;
        }
        .close {
            display: block;
            font-size: 16px;
            color: #909399;
            margin-right: -10px;
            padding: 10px;
            cursor: pointer;
        }
        .close:hover {
            color: @primary-color;
        }
    }

    &__body {
        position: relative;
        overflow-x: hidden;
        overflow-y: auto;
        flex: 1;
    }

    &__footer {
        position: relative;
        text-align: right;
        padding: 5px 20px 0;
        button + button {
            margin-left: 8px;
        }
    }
}
</style>
